<template>
  <div id="traffic-station">
    <div class="row">
      <div class="col col-1">
        <div class="row">
          <div class="row">
            <div class="row row-1"></div>
            <div class="row row-2">
              <div class="declare">
                <p class="ellipsis">区域概况</p>
              </div>
            </div>
            <div class="row row-3">
              <div id="leaflet-traffic-station" class="leaflet"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="col col-2">
        <div class="row">
          <div class="row">
            <div class="row row-1"></div>
            <div class="row row-2">
              <div class="row">
                <div class="row">
                  <div class="row row-1">
                    <div class="col col-1">
                      <div class="row">
                        <p>街道路口列表</p>
                      </div>
                    </div>
                    <div class="col col-2">
                      <div class="row">
                        <div class="col col-1">
                          <input
                            type="text"
                            maxlength="50"
                            v-model.trim="searchCondition"
                          />
                        </div>
                        <div class="col col-2">
                          <div class="button" @click="searchFunc()"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row row-2">
                    <div class="row">
                      <div class="row row-1">
                        <div class="col col-1">
                          <p>编号</p>
                        </div>
                        <div class="col col-2">
                          <p>地址</p>
                        </div>
                        <div class="col col-3">
                          <p>PM2.5</p>
                        </div>
                        <div class="col col-4">
                          <p>PM10</p>
                        </div>
                      </div>
                      <div class="row row-2">
                        <div class="row">
                          <vue-scroll :ops="ops">
                            <div
                              v-for="(item, index) in sortArray"
                              :key="index"
                              :class="
                                selectedDeviceId === item.current.deviceId
                                  ? 'row active'
                                  : 'row'
                              "
                              @click="
                                enterpriseMicrostationSelected(
                                  item.current.deviceId
                                )
                              "
                            >
                              <div class="row">
                                <div class="col col-1">
                                  <p>{{ index + 1 }}</p>
                                </div>
                                <div class="col col-2">
                                  <p>&nbsp;{{ item.enterprise.name }}&nbsp;</p>
                                </div>
                                <div class="col col-3">
                                  <p>
                                    {{ item.current.pm25 }}
                                  </p>
                                </div>
                                <div class="col col-4">
                                  <p>{{ item.current.pm10 }}</p>
                                </div>
                              </div>
                            </div>
                          </vue-scroll>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col col-3">
        <div class="row">
          <div class="row">
            <div class="row row-1"></div>
            <div class="row row-2">
              <div class="declare">
                <p class="ellipsis">实时监控</p>
              </div>
            </div>
            <div class="row row-3">
              <div class="col">
                <div id="flowplayer-1" class="flowplayer"></div>
              </div>
              <div class="col">
                <div id="flowplayer-2" class="flowplayer"></div>
              </div>
              <div class="col">
                <div id="flowplayer-3" class="flowplayer"></div>
              </div>
              <div class="col">
                <div id="flowplayer-4" class="flowplayer"></div>
              </div>
              <div class="col">
                <div id="flowplayer-5" class="flowplayer"></div>
              </div>
              <div class="col">
                <div id="flowplayer-6" class="flowplayer"></div>
              </div>
              <div class="col">
                <div id="flowplayer-7" class="flowplayer"></div>
              </div>
              <div class="col">
                <div id="flowplayer-8" class="flowplayer"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col col-4">
        <div class="row">
          <div class="row">
            <div class="row row-1"></div>
            <div class="row row-2">
              <div class="row">
                <div class="row">
                  <div class="row row-1">
                    <div class="row">
                      <p>报警信息</p>
                    </div>
                  </div>
                  <div class="row row-2">
                    <div class="row">
                      <div class="row row-1">
                        <div class="col col-1">
                          <p>&nbsp;</p>
                        </div>
                        <div class="col col-2">
                          <p>报警信息</p>
                        </div>
                        <div class="col col-3">
                          <p>污染类型</p>
                        </div>
                        <div class="col col-4">
                          <p>设备号</p>
                        </div>
                        <div class="col col-5">
                          <p>时间</p>
                        </div>
                      </div>
                      <div class="row row-2">
                        <div class="row">
                          <vue-scroll :ops="ops">
                            <div
                              v-for="(item,
                              index) in selectedEnterpriseData.warnList"
                              :key="index"
                              class="row"
                            >
                              <div class="col col-1">
                                <p></p>
                              </div>
                              <div class="col col-2">
                                <p>&nbsp;{{ item.pollutiontypes }}&nbsp;</p>
                              </div>
                              <div class="col col-3">
                                <p>{{ item.content }}</p>
                              </div>
                              <div class="col col-4">
                                <p>{{ item.deviceId }}</p>
                              </div>
                              <div class="col col-5">
                                <p>{{ item.createtime }}</p>
                              </div>
                            </div>
                          </vue-scroll>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import L from "leaflet";
import "../../assets/leaflet/leaflet.ChineseTmsProviders.js";
import flowplayer from "../../../public/flowplayer/flowplayer-3.2.13.min";
import enterpriseData from "../../../public/data/enterprise-data";
import { getCityDistrict } from "../../axios/api";

export default {
  data() {
    return {
      map: null,
      mapOption: {
        zoom: 12,
        center: [38.05011799965, 114.45691899961]
      },
      industryIndustryShow: 1,
      industryDataList: {},
      industryDataArray: {},
      industryOptionsShow: 0,
      selectedIndustryId: null,
      selectedIndustryData: {},
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          keepShow: true
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: "#666"
        }
      },
      sortArray: [],
      enterpriseList: {},
      selectedDeviceId: null,
      sortOrder: 0,
      enterpriseDataList: {},
      selectedEnterpriseData: {},
      colorList: {
        "warn-color-1": "#43ce17",
        "warn-color-2": "#efdc31",
        "warn-color-3": "#fa0",
        "warn-color-4": "#ff401a",
        "warn-color-5": "#d20040",
        "warn-color-6": "#9c0a4e"
      },
      searchCondition: "",
      industryStatisticsByTime: "month",
      deviceStatisticsByTime: "hour",
      enterpriseStatisticsByTime: "month",
      geojson: null
    };
  },
  methods: {
    init() {
      getCityDistrict(data => {
        this.geojson = JSON.parse(data.geojson);
        this.dataConversion();
      });
    },
    dataConversion() {
      this.enterpriseDataListConversion();
      this.sortArrayConversion();
      this.loadData();
    },
    enterpriseDataListConversion() {
      this.enterpriseList = enterpriseData;
      if (Number(enterpriseData.errcode) === 0) {
        enterpriseData.data.forEach(item => {
          this.enterpriseDataList[item.deviceId] = {
            current: item.current,
            enterprise: item.enterprise,
            warnList: item.warnList,
            videoList: [],
            statistics: {}
          };
          this.enterpriseDataList[item.deviceId][
            "videoList"
          ] = this.videoStatisticsConversion(item.videoList);
        });
      }
    },
    sortArrayConversion() {
      this.sortArray = JSON.parse(JSON.stringify(this.enterpriseList.data));
      this.sortArray = this.sortArray.sort(
        this.utils.compare(["current", "pm10"], 1)
      );
      if (this.sortArray.length > 0) {
        this.selectedDeviceId = this.sortArray[0].deviceId;
        this.selectedEnterpriseData = this.enterpriseDataList[
          this.selectedDeviceId
        ];
      }
    },
    videoStatisticsConversion(params) {
      let array = [];
      params.forEach((item, index) => {
        array.push({
          id: "flowplayer-" + (index + 1),
          url: item.http
        });
      });
      if (array.length < 8) {
        for (let i = array.length; i < 8; i++) {
          array.push({
            id: "flowplayer-" + (i + 1),
            url: "rtmp://"
          });
        }
      }
      return array;
    },
    loadData() {
      this.selectedEnterpriseData["videoList"].forEach(item => {
        this.initFlowplayer(item);
      });
      this.createMap();
    },
    createMap() {
      this.map = L.map("leaflet-traffic-station", {
        center: this.mapOption.center,
        zoom: this.mapOption.zoom
      });

      L.tileLayer(
        "http://t{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=bebf738d00ce5ce52058e5d1619d4f5c",
        {
          maxZoom: 18,
          minZoom: 9,
          subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
        }
      ).addTo(this.map);

      L.tileLayer(
        "https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=bebf738d00ce5ce52058e5d1619d4f5c",
        {
          subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
        }
      ).addTo(this.map);

      let __this = this;
      L.geoJSON(this.geojson, {
        coordsToLatLng: function(coords) {
          let wgs = __this.gps.gcj02ToWgs84(coords[1], coords[0]);
          return L.CRS.EPSG4326.unproject(L.point(wgs.lng, wgs.lat));
        },
        style: function() {
          return {
            fillColor: "transparent",
            color: "#ff0"
          };
        }
      }).addTo(this.map);

      this.createMarker();
    },
    createMarker() {
      for (let key in this.enterpriseDataList) {
        let item = this.enterpriseDataList[key];
        let address = item.enterprise.name;
        let pm10 = Math.round(item.current.pm10);
        let wgs = this.gps.bd09ToWgs84(item.current.lat, item.current.lng);
        let point = [wgs.lat, wgs.lng];
        let className = this.utils.validateAqi(pm10);
        let params = {
          point: point,
          className: className,
          pm10: pm10,
          deviceId: item.current.deviceId,
          address: address
        };
        this.createMarkerCircle(params);
        this.createMarkerAddress(params);
        this.createMarkerAqi(params);
      }
    },
    createMarkerCircle(data) {
      let icon = L.divIcon({
        html: `<div class="${data.className}"></div>`,
        className: "circle-icon",
        iconSize: [16, 16],
        iconAnchor: [8, 16]
      });

      L.marker(data.point, {
        icon: icon
      }).addTo(this.map);
    },
    createMarkerAddress(data) {
      let width = data.address.length * 18;
      let icon = L.divIcon({
        html: `<p class="${data.className} ellipsis">${data.address}</p>`,
        className: "address-icon",
        iconSize: [width, 24],
        iconAnchor: [width / 2, -6]
      });

      L.marker(data.point, {
        icon: icon
      }).addTo(this.map);
    },
    createMarkerAqi(data) {
      let icon = L.divIcon({
        html: `<div class="aqi ${data.className}">
               <p class="ellipsis">${data.pm10}</p>
               <div class="hornlike"></div>
            </div>`,
        className: "aqi-icon",
        iconSize: [50, 30],
        iconAnchor: [25, 60],
        popupAnchor: [0, -18]
      });

      let marker = L.marker(data.point, {
        icon: icon,
        maxWidth: 280
      }).addTo(this.map);
      marker.addEventListener("click", () => {
        this.selectedDeviceId = data.deviceId;
        this.selectedEnterpriseData = this.enterpriseDataList[
          this.selectedDeviceId
        ];
        // this.createPopup(data);
        // this.selectedEnterpriseData[this.deviceStatisticsByTime].forEach(
        //   item => {
        //     this.initEchartsHistogram(item);
        //   }
        // );
      });
    },
    createPopup(data) {
      console.log(this.enterpriseDataList);
      console.log(data.deviceId);
      let item = this.enterpriseDataList[data.deviceId];
      let id = data.deviceId + "-" + new Date().getTime();
      let content = this.getLeafletPopupHtmlTemplate(
        item.current,
        id,
        item.enterprise.name
      );
      L.popup({
        maxWidth: 270,
        offset: L.point(0, -12)
      })
        .setLatLng(data.point)
        .setContent(content)
        .openOn(this.map);
    },
    getLeafletPopupHtmlTemplate(data, id, name) {
      let aqiClassName = this.utils.validateAqi(data.aqi);
      let pm25ClassName = this.utils.validatePm2_5(data.pm25);
      let pm10ClassName = this.utils.validatePm10(data.pm10);
      let no2ClassName = this.utils.validateNo2(data.no2);
      let so2ClassName = this.utils.validateSo2(data.so2);
      let coClassName = this.utils.validateCo(data.co);
      let o3ClassName = this.utils.validateO3(data.o3);
      return `<div class="container">
            <div class="row row-1">
              <div class="col col-1">
                <div class="row row-1">
                  <p class="ellipsis">${name}</p>
                </div>
                <div class="row row-2">
                  <p class="ellipsis">${data.dt}</p>
                </div>
              </div>
              <div class="col col-2">
                <div class="row row-1 ${aqiClassName}">
                  <div class="row row-1">
                    <p class="ellipsis">AQI</p>
                  </div>
                  <div class=" row row-2">
                    <p class="ellipsis">${Math.round(data.aqi)}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="row row-2">
              <p class="ellipsis">${data.address}</p>
            </div>
            <div class="row row-3">
              <div class="col col-1">
                <div class="row row-1">
                  <p class="${pm25ClassName} ellipsis">PM2.5</p>
                </div>
                <div class="row row-2">
                  <p class="ellipsis">${data.pm25}</p>
                </div>
              </div>
              <div class="col col-2">
                <div class="row row-1">
                  <p class="${pm10ClassName} ellipsis">PM10</p>
                </div>
                <div class="row row-2">
                  <p class="ellipsis">${data.pm10}</p>
                </div>
              </div>
              <div class="col col-3">
                <div class="row row-1">
                  <p class="${no2ClassName} ellipsis">NO2</p>
                </div>
                <div class="row row-2">
                  <p class="ellipsis">${data.no2}</p>
                </div>
              </div>
              <div class="col col-4">
                <div class="row row-1">
                  <p class="${so2ClassName} ellipsis">SO2</p>
                </div>
                <div class="row row-2">
                  <p class="ellipsis">${data.so2}</p>
                </div>
              </div>
              <div class="col col-5">
                <div class="row row-1">
                  <p class="${coClassName} ellipsis">CO</p>
                </div>
                <div class="row row-2">
                  <p class="ellipsis">${data.co}</p>
                </div>
              </div>
              <div class="col col-6">
                <div class="row row-1">
                  <p class="${o3ClassName} ellipsis">O3</p>
                </div>
                <div class="row row-2">
                  <p class="ellipsis">${data.o3}</p>
                </div>
              </div>
            </div>
            <div class="row row-4"></div>
            <div class="row row-5">
              <div class="col col-1">
                <p class="ellipsis">${data.temp}℃</p>
              </div>
              <div class="col col-2">
                <p class="ellipsis">${data.humi}%</p>
              </div>
              <div class="col col-3">
                <p class="ellipsis">${data.press}kPa</p>
              </div>
              <div class="col col-4">
                <p class="ellipsis">${this.utils.validateWindDirection(
                  data.wd,
                  data.ws
                )}</p>
              </div>
              <div class="col col-5">
                <p class="ellipsis">${this.utils.validateWindSpeed(data.ws)}</p>
              </div>
            </div>
            <div class="row row-6">
              <div id="${id}" class="echarts"></div>
            </div>
          </div>`;
    },
    enterpriseMicrostationSelected(deviceId) {
      this.selectedDeviceId = deviceId;
      this.selectedEnterpriseData = this.enterpriseDataList[
        this.selectedDeviceId
      ];
    },
    changeSortOrder() {
      this.sortOrder = 1 - this.sortOrder;
      this.sortArray.reverse();
    },
    initFlowplayer(params) {
      flowplayer(params.id, "./flowplayer/flowplayer-3.2.18.swf", {
        clip: {
          url: "",
          provider: "rtmp",
          live: true,
          bufferLength: 0,
          smoothing: true,
          autoPlay: true,
          autoBuffering: true
        },
        plugins: {
          rtmp: {
            url: "./flowplayer/flowplayer.rtmp-3.2.13.swf",
            netConnectionUrl: params.url
          }
        }
      });
    },
    searchFunc() {
      this.sortArray = JSON.parse(JSON.stringify(this.enterpriseList.data));
      this.sortArray = this.sortArray.filter(item => {
        let reg = new RegExp(this.searchCondition);
        return reg.test(item.enterprise.name);
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style lang="stylus" scoped>
#traffic-station
  position relative
  width 100%
  height 100%

  > .row
    height 100%

    > .col-1
      width 1074px
      height 100%

      > .row
        height 100%

        > .row
          height 100%

          > .row-1
            height 120px

          > .row-2
            height 59px
            padding 30px 0

          > .row-3
            height 775px

            > .leaflet
              position relative
              width 100%
              height 100%
              z-index 9

              >>> .leaflet-marker-icon.address-icon
                line-height 24px
                text-align center

                p
                  font-size 16px
                  border-radius 5px
                  background-color #fff

              >>> .leaflet-marker-icon.circle-icon
                > div
                  width 16px
                  height 16px
                  border-radius 50%

              >>> .leaflet-marker-icon.aqi-icon
                > .aqi
                  position relative
                  border-radius 5px
                  text-align center
                  line-height 28px
                  font-size 20px
                  color #fff

                  > .hornlike
                    position absolute
                    left 18px
                    bottom -10px
                    margin -5px 0 0 5px
                    border-left 1px solid transparent
                    border-right 8px solid transparent

    > .col-2
      width 1074px
      height 100%

      > .row
        height 100%
        padding 0 40px

        > .row
          height 100%

          > .row-1
            height 239px

          > .row-2
            height 775px
            background-color #001852

            > .row
              height 100%
              padding 0 30px

              > .row
                height 100%

                > .row-1
                  height 107px

                  > .col-1
                    width 522px
                    font-size 24px
                    color #fff

                    > .row
                      height 33px
                      margin 31px 0

                      > p
                        position relative
                        padding-left 38px
                        line-height 33px

                      > p::before
                        content ''
                        position absolute
                        top 0
                        left 0
                        width 33px
                        height 33px
                        background url("../../assets/img/20190718140035.png") no-repeat top left
                        background-size 33px 33px

                  > .col-2
                    width 412px

                    > .row
                      height 33px
                      margin 31px 0

                      > .col-1
                        width 340px

                        > input
                          width 318px
                          height 29px
                          float right
                          padding 1px 10px
                          border 1px solid #00a0e9
                          outline 0
                          background-color #022776
                          font-size 18px
                          color #fff

                      > .col-2
                        width 72px

                        > .button
                          width 72px
                          height 33px
                          background-color #00a0e9
                          cursor pointer

                        > .button::after
                          content ''
                          position absolute
                          top 7px
                          left 27px
                          width 18px
                          height 19px
                          background url("../../assets/img/station/20190718140042.png") no-repeat top left
                          background-size 18px 19px

                > .row-2
                  height 600px

                  > .row
                    width 934px

                    > .row-1
                      line-height 40px
                      text-align center
                      font-size 18px
                      color #fff

                      > .col
                        overflow hidden
                        white-space nowrap
                        text-overflow ellipsis

                      > .col-1
                        width 120px

                      > .col-2
                        width 400px

                      > .col-3
                        width 200px

                      > .col-4
                        width 200px

                    > .row-2
                      text-align center
                      font-size 18px
                      color #fff

                      > .row
                        height 600px

                        > .__vuescroll
                          > .__panel
                            > .__view
                              > .row
                                width 920px
                                height 50px
                                line-height 50px
                                z-index 9
                                cursor pointer

                                > .row
                                  > .col
                                    > p
                                      overflow hidden
                                      white-space nowrap
                                      text-overflow ellipsis

                                  > .col-1
                                    width 120px

                                  > .col-2
                                    width 400px

                                  > .col-3
                                    width 200px

                                  > .col-4
                                    width 200px


                              > .row::after
                                content ''
                                position absolute
                                bottom 0
                                left -25px
                                width 945px
                                height 2px
                                background url("../../assets/img/20190708145229.jpg") no-repeat top left
                                background-size 945px 2px
                                z-index -1

                              > .row.active
                                > .row
                                  height 50px
                                  line-height 46px
                                  box-sizing: border-box;
                                  border 2px solid #fc7500
                                  background-color #541e04

                                  > .col-1
                                    width 116px
                                    padding-right 2px

                                  > .col-2
                                    width 400px

                                  > .col-3
                                    width 200px

                                  > .col-4
                                    width 196px
                                    padding-left 2px

    > .col-3
      width 2148px
      height 100%

      > .row
        height 100%
        padding 0 40px

        > .row
          height 100%

          > .row-1
            height 120px

          > .row-2
            padding 30px 0 30px 900px

          > .row-3
            height 775px
            background-color #001852

            > .col
              width 25%
              height 50%

              > .flowplayer
                position relative
                width 100%
                height 100%


    > .col-4
      width 994px
      height 100%

      > .row
        height 100%

        > .row
          height 100%

          > .row-1
            height 239px

          > .row-2
            height 775px
            background-color #001852

            > .row
              height 100%
              padding 0 30px

              > .row
                height 100%

                > .row-1
                  padding 30px 0 15px
                  height 33px

                  > .row
                    height 33px
                    font-size 24px
                    color #fff

                    > p
                      position relative
                      padding-left 38px
                      line-height 33px

                    > p::before
                      content ''
                      position absolute
                      top 0
                      left 0
                      width 33px
                      height 33px
                      background url("../../assets/img/20190718140035.png") no-repeat top left
                      background-size 33px 33px

                > .row-2
                  height 267px

                  > .row
                    width 934px

                    > .row-1
                      line-height 40px
                      text-align center
                      font-size 18px
                      color #fff

                      > .col
                        overflow hidden
                        white-space nowrap
                        text-overflow ellipsis

                      > .col-1
                        width 70px

                      > .col-2
                        width 240px

                      > .col-3
                        width 180px

                      > .col-4
                        width 200px

                      > .col-5
                        width 200px

                    > .row-2
                      text-align center
                      font-size 18px
                      color #fff

                      > .row
                        height 637px

                        > .__vuescroll
                          > .__panel
                            > .__view
                              > .row
                                width 920px
                                height 50px
                                line-height 50px
                                z-index 9
                                cursor pointer

                                > .col
                                  height 100%

                                  > p
                                    overflow hidden
                                    white-space nowrap
                                    text-overflow ellipsis

                                > .col-1
                                  width 70px

                                  p
                                    position relative
                                    width 20px
                                    height 20px
                                    margin 15px 25px
                                    background-color #f00
                                    border-radius 50%

                                > .col-2
                                  width 240px

                                > .col-3
                                  width 180px

                                > .col-4
                                  width 200px

                                > .col-5
                                  width 200px


                              > .row::after
                                content ''
                                position absolute
                                bottom 0
                                left -25px
                                width 945px
                                height 2px
                                background url("../../assets/img/20190708145229.jpg") no-repeat top left
                                background-size 945px 2px
                                z-index -1
</style>
